.play-box{
  width: 100%;
  height: var(--rem-800);
  box-sizing: border-box;
  border: 2px solid var(--border-color);
  &.play-box-h5{
    height: calc(100vh - var(--rem-60));
  }
  display: flex;
  iframe{
    width: 100%;
    height: 100%;
  }
  .play-box-card{
    width: var(--rem-300);
    background-color: var(--bg-tab);
    padding: var(--rem-27);
    img{
      display: block;
      &.play-box-img1{
        margin: 0 auto var(--rem-10);
      }
      &.play-box-img2{
        border-radius: var(--rem-20);
      }
    }
    h3{
      font-weight: 500;
      font-size: var(--rem-16);
      color: var(--z-font-anti);
      text-align: center;
      line-height: var(--rem-40);
    }
    .play-box-tools{
      display: flex;
      justify-content: center;
      li{
        width: 100%;
        cursor: pointer;
        height: var(--rem-70);
        background: var(--z-bg-def);
        border-radius: var(--rem-12);
        margin: var(--rem-20) var(--rem-10) 0;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        font-size: var(--rem-20);
        span{
          font-size: var(--rem-14);
        }
        &.play-box-collected{
          color: var(--z-bg-act);
        }
      }
    }
  }
}
